<template>
    <div class="message" @click="hiddenLayer">
        <Head title="消息（99+）" :ImgShow="true"></Head>
        <div class="icon" @click.stop="changeAddLayer">
            <img src="../assets/img/addInfo.png">
            <div class="layer" v-if="addLayer">
                <div class="arrow"></div>
                <div class="col groupChatL">
                    <img src="../assets/img/groupChatL.png">
                    <span>发起群聊</span>
                </div>
                <div class="col" @click="bindToAddFriend">
                    <img src="../assets/img/addFriendL.png">
                    <span>添加好友</span>
                </div>
            </div>
        </div>
        <div class="messageContent">
            <Search placeholder="搜索" jump="/chatrecord"></Search>
            <div class="messageList">
                <van-swipe-cell :right-width="item.top?rightWidthC:rightWidth" v-for="(item,index) in messageList"
                                :key="index">
                    <div class="messageRung" :class="{'messageRungTop':item.top}"
                         @click="bindToRoom(item.infoFriend)">
                        <!--消息左边头像区域 start-->
                        <div class="left">
                            <div class="leftContent">
                                <img :src="item.infoFriend.pic" :class="{'avatarGroup':item.group}">

                                <img src="../assets/img/officialIcon.png" class="foot" v-if="item.official">
                                <img src="../assets/img/groupIcon.png" class="foot" v-if="item.group">

                                <div class="van-info" v-if="!item.dontDis && item.infoNum !==''">{{item.infoNum}}</div>
                                <div class="van-dot" v-if="item.dontDis"></div>

                            </div>
                        </div>
                        <!--消息左边头像区域 end-->

                        <!--消息右边信息区域 start-->
                        <div class="right">
                            <div class="top">
                                <p class="name">{{item.infoFriend.remark}}</p>
                                <p class="time">2019-03-22</p>
                            </div>
                            <div class="bot">
                                <p class="contentTxt">最近就觉得这个番还不错。<img src="../assets/img/hotContIcon.png"></p>
                                <p class="botIcon">
                                    <img src="../assets/img/hotIcon.png" v-if="item.readBurn">
                                    <img src="../assets/img/infoDontDisIcon.png" v-if="item.dontDis">
                                </p>
                            </div>
                        </div>
                        <!--消息右边信息区域 end-->
                    </div>
                    <div slot="right" class="option" :class="{'cancleTop':item.top}">
                        <div class="top">{{item.top?'取消置顶':'置顶'}}</div>
                        <div class="delete">删除</div>
                    </div>
                </van-swipe-cell>
            </div>
        </div>
        <Tab info="99+" :active="active"></Tab>
    </div>
</template>

<script>
    import Head from "../components/Head"
    import Tab from "../components/Tab"
    import Search from "../components/Search"
    import {SwipeCell} from 'vant';
    import Url from "../untils/configUrl";

    export default {
        data() {
            return {
                addLayer: false,
                rightWidth: 138,
                rightWidthC: 174,
                messageList: [
                    // {
                    //     name: "小琳同学",
                    //     top: true,   //当前信息是否为置顶
                    //     group: false,  //是否为群组聊天
                    //     dontDis: true,  //是否为消息免打扰
                    //     readBurn: true,  //是否为阅后即焚
                    //     official: false,  //是否为官方消息
                    //     infoNum: "99+"
                    // },

                    /* {
                         name: "小琳同学",
                         top: true,
                         group: false,
                         dontDis: false,
                         readBurn: false,
                         official: false,
                         infoNum: "3"
                     },
                     {
                         name: "秋名山种子群",
                         top: false,
                         group: true,
                         dontDis: false,
                         readBurn: false,
                         official: false,
                         infoNum: "23"
                     },
                     {
                         name: "助手消息",
                         top: false,
                         group: false,
                         dontDis: true,
                         readBurn: false,
                         official: true,
                         infoNum: "12"
                     },*/
                ],
                active: 0,
                active_id: "",
                send_to_id: ""
            }
        },
        components: {
            Head,
            Tab,
            Search,
            [SwipeCell.name]: SwipeCell
        },
        methods: {
            changeAddLayer() {

                this.addLayer = !this.addLayer;

                /*this.$post(Url.urlConfig.sendMessage, {
                    cmd: "user",
                    active_id: this.active_id,
                    send_to_id: this.send_to_id,
                    msg: "消息测试1",
                    type: 1
                }).then((res) => {
                    console.log(res);
                })*/

                //Url.urlConfig.sendMessage

                //接收离线消息
                /*this.$post(Url.urlConfig.updateApplication,{
                     id: "21"
                 }).then((res) => {
                     console.log(res);
                 });*/


            },
            bindToRoom(params) {
                this.$router.push({
                    path:"/chatroom",
                    query: {
                        ...params
                    }
                })
            },
            bindToRecord() {
                this.$router.push("/chatrecord")
            },
            hiddenLayer() {
                this.addLayer = false
            },
            bindToAddFriend() {
                this.$router.push("/AddFriend");
            }
        },
        mounted() {
            //设置置顶和删除按钮宽度(置顶)
            let curW = document.documentElement.clientWidth || document.body.clientWidth;
            this.rightWidth = curW * 138 / 375;
            //设置置顶和删除按钮宽度(取消置顶)
            this.rightWidthC = curW * 174 / 375;
        },
        created() {
            let active_id = localStorage.getItem('active_id'),
                send_to_id = localStorage.getItem('friend_client_id');
            this.active_id = active_id;
            this.send_to_id = send_to_id;
            this.$get(Url.urlConfig.friendList).then((res) => {
                let data = res.data;
                if (data) {
                    let arr = Object.keys(data);
                    arr.reverse();
                    if (arr.length !== 0) {
                        // let friend = data[arr[0]][0];
                        for (let i = 0; i < arr.length; i++) {
                            let curData = arr[i];
                            this.messageList.push({
                                top: true,   //当前信息是否为置顶
                                group: false,  //是否为群组聊天
                                dontDis: true,  //是否为消息免打扰
                                readBurn: true,  //是否为阅后即焚
                                official: false,  //是否为官方消息
                                infoNum: "3",
                                infoFriend: data[arr[i]][0]
                            });
                        }

                    }
                }
            })
        }
    }

</script>

<style scoped lang="less">

    .message {
        position: relative;
        width: 100%;
        height: 100%;
        background-color: #ffffff;
    }

    .icon {
        position: fixed;
        z-index: 999;
        top: 22px;
        right: 40px;
        width: 45px;
        height: 45px;

        img {
            width: 45px;
            height: 45px;
            vertical-align: top;
        }

        .layer {
            display: flex;
            flex-direction: column;
            justify-content: right;
            position: absolute;
            top: 66px;
            right: -17px;
            width: 251px;
            height: 221px;
            background: rgba(28, 30, 30, .8);
            border-radius: 5px;

            .arrow {
                position: absolute;
                top: -22px;
                right: 27px;
                width: 0;
                height: 0;
                border-top: 11px solid transparent;
                border-bottom: 11px solid rgba(28, 30, 30, .8);
                border-left: 12px solid transparent;
                border-right: 12px solid transparent;
            }

            .col {
                display: flex;
                align-items: center;
                width: 221px;
                height: 110px;
                margin-left: 30px;

                img {
                    width: 40px;
                    height: 40px;
                    margin-right: 18px;
                }

                span {
                    font-size: 34px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(255, 255, 255, 1);
                }
            }

            .groupChatL {
                border-bottom: 1px solid #646464;
            }
        }
    }

    .messageContent {
        position: absolute;
        top: 88px;
        bottom: 98px;
        width: 100%;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;

        .messageList {

            .messageRung {
                display: flex;
                width: 100%;
                height: 140px;
                background-color: #ffffff;

                .left {
                    width: 156px;
                    height: 140px;
                    padding: 20px 0 0 30px;
                    box-sizing: border-box;

                    .leftContent {
                        position: relative;
                        width: 90px;
                        height: 90px;

                        img {
                            width: 90px;
                            height: 90px;
                            border-radius: 50%;
                            box-sizing: border-box;
                        }

                        .avatarGroup {
                            border: 2px solid #D6D7DC;
                        }

                        .van-info {
                            top: -6px;
                            z-index: 9;
                        }

                        .van-dot {
                            top: 2px;
                            right: 6px;
                            width: 16px;
                            height: 16px;
                            content: ' ';
                            position: absolute;
                            z-index: 9;
                            border-radius: 100%;
                            background-color: #f44;
                        }

                        .foot {
                            position: absolute;
                            right: -2px;
                            bottom: -4px;
                            width: 55px;
                            height: 30px;
                        }
                    }
                }

                .right {
                    width: 594px;
                    height: 140px;
                    border-bottom: 1px solid #EEEEEE;
                    padding-top: 21px;
                    padding-left: 2px;
                    box-sizing: border-box;

                    .top {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        margin-bottom: 23px;
                        padding-right: 41px;
                        box-sizing: border-box;

                        .name {
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(50, 50, 50, 1);

                            img {
                                width: 28px;
                                height: 28px;
                                vertical-align: top;
                                margin: 0 4px;
                            }

                        }

                        .time {
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(186, 186, 186, 1);
                        }
                    }

                    .bot {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        padding-right: 36px;
                        box-sizing: border-box;

                        .contentTxt {
                            width: 500px;
                            overflow: hidden;
                            text-overflow: ellipsis;
                            white-space: nowrap;
                            font-size: 28px;
                            font-family: PingFangSC-Regular;
                            font-weight: 400;
                            color: rgba(186, 186, 186, 1);

                            img {
                                width: 22px;
                                height: 28px;
                                vertical-align: top;
                            }
                        }

                        .botIcon {
                            width: 30px;
                            height: 30px;

                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                    }
                }
            }

            /*消息置顶样式*/

            .messageRungTop {
                background-color: #f3f4fb;
            }

            /*置顶操作栏样式*/

            .option {
                width: 276px;
                height: 100%;
                display: flex;

                div {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    width: 50%;
                    height: 100%;
                    font-size: 36px;
                    font-family: PingFangSC-Regular;
                    font-weight: 400;
                    color: rgba(255, 254, 254, 1);
                }

                .delete {
                    background-color: #ea4e3d;
                }

                .top {
                    background-color: #C7C7CB;
                }

            }

            /*取消置顶样式*/

            .cancleTop {
                width: 348px;

                .top {
                    width: 210px;
                }

                .delete {
                    width: 138px;
                    background-color: #ea4e3d;
                }
            }

        }
    }

</style>
